<template>
  <div>
    <el-form
      :inline="true"
      label-position="right"
      label-width="80px"
      size="small"
      :model="query"
    >
      <!-- 第一行 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <el-form-item label="试卷名称">
            <el-input v-model="query.paper_name" placeholder="请输入试卷名称" style="width:700px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试卷包含题型" label-width="130px">
            <el-checkbox-group v-model="query.quest_type" @change="selectType">
              <el-checkbox
                v-for="item in questionList"
                :key="item.type"
                :label="item.type"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="归属学科">
            <el-select
              v-model="query.subject_id"
              placeholder="请选择学科"
              clearable
              @change="changeSubject"
            >
              <el-option
                v-for="item in treeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归属目录">
            <el-select
              v-model="query.directory_id"
              placeholder="请选择目录"
              clearable
            >
              <el-option
                v-for="item in directoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试卷状态">
            <el-radio-group v-model="query.show_state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试卷类型">
            <el-radio-group v-model="query.paper_type">
              <el-radio :label="1">模拟卷</el-radio>
              <el-radio :label="2">考试卷</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="试卷总分">
            <el-input v-model="query.total_score" placeholder="100" style="width:115px">
              <template slot="append" style="width:55px">分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="及格分数">
            <el-input v-model="query.pass_score" placeholder="60" style="width:105px">
              <template slot="append" style="width:55px">分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试卷难度">
            <el-select
              v-model="query.difficulty"
              placeholder="请选择难度"
              clearable
            >
              <el-option label="简单" :value="1" />
              <el-option label="中等" :value="2" />
              <el-option label="较难" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col>
          <el-form-item label="选题信息">
            <el-table border="" :data="query.check_question_list" empty-text="请勾选试卷包含题型，从而生成选题模板">
              <el-table-column label="题型" width="140" prop="name" />
              <el-table-column label="选题信息" width="1370">
                <template slot-scope="scope">
                  <span>共
                    <el-input v-model="scope.row.num" style="width:60px" />，每题
                    <el-input v-model="scope.row.score" style="width:60px" />分，已选题数：<span style="color:#40b8ff">{{ scope.row.num }}</span> 题 </span>
                  <el-button type="success">看题</el-button>
                  <el-button type="primary" @click="selectQestion">选题</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row style="margin：10px">
        <el-col>
          <el-button type="primary" @click="butOk">{{ editList.id?'立即修改':'立即创建' }}</el-button>
          <el-button>取消</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-------------弹框------------- -->
    <el-dialog
      title="选择试题"
      :visible.sync="dialogVisible"
      width="70%"
    />
  </div>
</template>

<script>
import { addPaper, editPaper } from '@/api/exam'
const defaultItem = {
  check_question_list: [
  ],
  difficulty: '',
  directory_id: '',
  paper_name: '',
  paper_type: 2,
  pass_score: 60,
  quest_type: [],
  question_list: [],
  show_state: 1,
  subject_id: '',
  total_score: 100
}
export default {
  props: {
    editList: {
      type: [Array, Object, String],
      default: null
    }
  },
  data() {
    return {
      query: { ...defaultItem },
      // list: [],
      treeList: [],
      questionList: [
        { type: 1, name: '单选题', num: 0, score: 0 },
        { type: 2, name: '多选题', num: 0, score: 0 },
        { type: 3, name: '判断题', num: 0, score: 0 },
        { type: 4, name: '简答题', num: 0, score: 0 }
      ],
      // 控制弹框的显示
      dialogVisible: false
    }
  },
  computed: {
    directoryList() { // 目录信息
      if (!this.query.subject_id) {
        return []
      } else {
        const result = this.treeList.find(val => val.id === this.query.subject_id)
        console.log(result.children)
        return result.children
      }
    }
  },
  created() {
    !this.treeList.length && this.getTreeList()
  },
  methods: {
    // 对表格数据进行处理
    selectType(val) {
      // console.log(val.sort())
      this.query.check_question_list = val.sort().map(item => { return this.questionList.find(obj => obj.type === item) })
      // console.log(this.questionList)
    },
    // 添加数据或修改数据
    async butOk() {
      if (this.editList.id) {
        // 修改
        try {
          await editPaper({ ...this.query })
          this.$message.success('修改试卷信息成功')
          this.$emit('backParperList')
        } catch (error) {
          console.log(error)
        }
      } else {
        // 增加
        const res = await addPaper({ ...this.query })
        console.log(res)
      }
    },
    async getTreeList() {
      try {
        this.treeList = await this.$store.dispatch('paper/getTreeList')
        console.log(this.treeList)
      } catch (error) {
        console.log(error)
      }
    },
    // 表单数据回显
    editPage() {
      // console.log(val)
      this.query = { ...this.editList,
        check_question_list: JSON.parse(this.editList.check_question_list),
        quest_type: JSON.parse(this.editList.quest_type),
        question_list: this.editList.question_list.split() }
      console.log(this.query)
    },
    // 选题
    selectQestion() {
      this.dialogVisible = true
    },
    changeSubject(val) {
      console.log(val)
      this.query.directory_id = ''
    }
  }
}
</script>

<style>

</style>
